<template>
	<view>
		<uni-card >
			<uni-section class="mb-10" title=" 预约入住">
				<template v-slot:right><span style="color: green; size: 100px;">预约成功！</span></template>
			</uni-section>
			<view class="separator"></view>
			<uni-section class="mb-10" title=" 用户名">
				<template v-slot:right>{{ formData.username }}</template>
			</uni-section>
			<uni-section class="mb-10" title=" 入住类型">
				<template v-slot:right>{{ formData.type }}</template>
			</uni-section>
			<uni-section class="mb-10" title=" 入住时间">
				<template v-slot:right>{{ formData.checkInTime }}</template>
			</uni-section>
			<uni-section class="mb-10" title=" 创建时间">
				<template v-slot:right>{{ formData.createTime }}</template>
			</uni-section>

		</uni-card>
	</view>

</template>
<script>
import axios from 'axios';

	export default {
		data() {
				return {
					formData: {
						username: '',
						type: '',
						checkInTime: '',
						createTime:''
					},
				};
			},
			methods: {
				async fetchAppointmentDetails() {
					try {
						 const response = await axios.get('http://localhost:8080/v1/appointment/select');
						this.formData = response.data;
					} catch (error) {
						console.error('获取预约详情失败:', error);
					}
				}
			}
	}
</script>

<style>
	.separator {
		width: 100%;
		height: 1px;
		background-color: #ccc;
		margin: 12px 0;
	}

	.status-body {
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: row;
		align-items: center;
		justify-content: center;
		height: 92rpx;
		margin: 30rpx;
		background-color: #007AFF;
	}

	.example-btn {
		/* #ifndef APP-NVUE */
		display: block;
		/* #endif */
		padding: 15px;
		flex-direction: row;
	}
	.separator {
		width: 100%;
		height: 1px;
		background-color: #ccc;
		margin: 8px 0;
	}
	.mb-10 {
			margin-bottom: 2px;
			
		}
</style>